<template>
  <div class="login">
    <div class="login-warper"
         :style="{ height: isLogin?'300px': isRegister?'520px':'550px'}">
      <div v-if="isLogin"
           class="title">登 录</div>
      <div v-if="isReset"
           class="title">重置密码</div>
      <div v-if="isRegister"
           class="title">注 册</div>
      <div class="input-box">
        <!-- 学号 -->
        <div>
          <div class="input-title">学号:</div>
          <div style="position: relative;">
            <el-input class="input-item"
                      v-model="studentId"
                      placeholder="请输入你的学号"
                      maxlength="10"
                      autofocus
                      clearable
                      :formatter="(value) => `${value}`"
                      :parser="(value) => value.replace(/[^0-9]/g, '')" />
            <div v-if="studentIdErr"
                 class="red-tip">小子，你黑户是吧</div>
          </div>
        </div>
        <!-- password -->
        <div>
          <div class="input-title">密码:</div>
          <div style="position: relative;">
            <el-input class="input-item"
                      v-model="password"
                      type="password"
                      minlength="6"
                      maxlength="12"
                      show-password
                      placeholder="请输入6-12位密码"
                      clearable
                      :formatter="(value) => `${value}`"
                      :parser="(value) => value.replace(/[^a-zA-Z0-9]/g, '')" />
            <div v-if="passwordErr"
                 class="red-tip">亲爱的，请设置8-16位数字和字母组合哦</div>
          </div>
        </div>
        <!-- passwoedAgain -->
        <div v-if="isReset">
          <div class="input-title">确认密码:</div>
          <div style="position: relative;">
            <el-input class="input-item"
                      v-model="passwordAgain"
                      type="password"
                      minlength="6"
                      maxlength="12"
                      show-password
                      placeholder="再次输入密码"
                      clearable
                      :formatter="(value) => `${value}`"
                      :parser="(value) => value.replace(/[^a-zA-Z0-9]/g, '')" />
            <div v-if="passwordAgainErr"
                 class="red-tip">啊？你要设置两个密码咩？</div>
          </div>
        </div>
        <!-- 密保 -->
        <div v-if="isRegister || isReset">
          <!-- 问题 -->
          <div>
            <div class="input-title">密保:</div>
            <el-select class="input-item"
                       v-model="security"
                       clearable
                       placeholder="密保问题">
              <el-option v-for="item in securityOptions"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value" />
            </el-select>
          </div>
          <!-- 答案 -->
          <div>
            <div class="input-title">答案:</div>
            <el-input class="input-item"
                      v-model="answer"
                      maxlength="26"
                      clearable
                      placeholder="请输入答案"
                      :formatter="(value) => `${value}`"
                      :parser="(value) => value.replace(/\s/g, '')" />
          </div>
        </div>
        <!-- 年级班级 -->
        <div class="register-select"
             v-if="isRegister">
          <div>
            <span style="margin-right: 10px;">年级:</span>
            <el-select v-model="grade"
                       filterable
                       placeholder="年级"
                       style="width: 130px">
              <el-option v-for="item in gradeOptions"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value" />
            </el-select>
          </div>
          <div>
            <span style="margin-right: 10px;">班级:</span>
            <el-select v-model="classNum"
                       filterable
                       placeholder="班级"
                       style="width: 130px">
              <el-option v-for="item in classOptions"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value" />
            </el-select>
          </div>
        </div>
        <div class="forgot-pwd">
          <a v-if="isLogin"
             href="#"
             @click="goResetPwd">forgot password?</a>
          <a v-else
             href="#"
             @click="goLogin">Login</a>
        </div>
      </div>
      <div class="btn-box">
        <div v-if="isLogin"
             class="login-btn"
             @click="login">Let's go</div>
        <div v-if="!isLogin"
             class="reset-btn"
             v-debounce="confirm">确定</div>
        <div v-if="!isRegister"
             class="register-btn"
             @click="goRegister">注册</div>
      </div>
    </div>
    <global-loading v-if="gloading"></global-loading>
  </div>
</template>

<script>
import { user_login, user_register, user_resetPwd } from '@/request/api'

export default {
  name: 'login',
  data() {
    return {
      isLogin: true, // 登录界面
      isReset: false, // 重置密码界面
      isRegister: false, // 注册界面
      studentId: '', // 用户名
      password: '', // 密码
      passwordAgain: '', // 确认密码
      studentIdErr: false, // 用户名错误
      passwordErr: false, // 密码错误
      passwordAgainErr: false, // 确认密码错误
      gloading: false, // 全局loading
      grade: '', // 年级
      classNum: '', // 班级
      security: '', // 密保
      answer: '', // 答案
      gradeOptions: [
        {
          value: '1',
          label: '初一',
        },
        {
          value: '2',
          label: '初二',
        },
        {
          value: '3',
          label: '初三',
        },
        {
          value: '4',
          label: '高一',
        },
        {
          value: '5',
          label: '高二',
        },
        {
          value: '6',
          label: '高三',
        },
      ], // 年级下拉框
      classOptions: [
        {
          value: '1',
          label: '一班',
        },
        {
          value: '2',
          label: '二班',
        },
        {
          value: '3',
          label: '三班',
        },
        {
          value: '4',
          label: '四班',
        },
        {
          value: '5',
          label: '五班',
        },
        {
          value: '6',
          label: '六班',
        },
        {
          value: '7',
          label: '七班',
        },
        {
          value: '8',
          label: '八班',
        },
        {
          value: '9',
          label: '九班',
        },
        {
          value: '10',
          label: '十班',
        },
      ], // 班级下拉框
      securityOptions: [
        {
          value: '1',
          label: '你的生日是哪一天？',
        },
        {
          value: '2',
          label: '你最喜欢的老师叫什么？',
        },
        {
          value: '3',
          label: '你曾经就读过的小学名称是什么？',
        },
        {
          value: '4',
          label: '你最擅长的学科是什么？',
        },
        {
          value: '5',
          label: '你最近一次在学校图书馆借阅的书的书名是什么？',
        },
        {
          value: '6',
          label: '你第一次参加的学校活动的名称是什么？',
        },
      ], // 密保问题下拉框
    }
  },
  components: {},
  mounted() {},
  methods: {
    // 去重置密码
    goResetPwd() {
      this.isLogin = false
      this.isReset = true
      this.password = ''
    },
    // 返回登录
    goLogin() {
      this.clearInput()
      this.isReset = false
      this.isRegister = false
      this.isLogin = true
    },
    // 去注册
    goRegister() {
      this.clearInput(true)
      this.isReset = false
      this.isLogin = false
      this.isRegister = true
    },
    clearInput(register = false) {
      if (register) this.studentId = ''
      this.password = ''
      this.passwordAgain = ''
      this.security = ''
      this.answer = ''
      this.grade = ''
      this.classNum = ''
    },
    // 登录
    async login() {
      const pass = this.checkInput()
      if (pass != 1) return
      const data = {
        student_id: this.studentId,
        password: this.password,
      }
      this.gloading = true
      const { RetCode, RetObject, RetMessage } = await user_login(data)
      if (RetCode == 0) {
        this.gloading = false
        this.$message.success(RetMessage)
        this.$router.push('/home/welcome')
        sessionStorage.setItem('loginInfo', JSON.stringify(RetObject))
      } else {
        this.gloading = false
        this.$message.error(RetMessage ? RetMessage : '网络错误，请稍后重试！')
      }
    },
    // 重置密码、注册
    confirm() {
      const pass = this.checkInput()
      if (pass != 1) return
      if (this.isReset) {
        this.userResetPwd()
      } else if (this.isRegister) {
        this.userRegister()
      }
    },
    // 用户注册
    async userRegister() {
      const { RetCode, RetMessage, RetObject } = await user_register({
        student_id: this.studentId,
        password: this.password,
        security: this.security,
        answer: this.answer,
        grade: this.grade,
        class: this.classNum,
      })
      if (RetCode == 0) {
        this.$message.success(RetMessage)
        this.goLogin()
      } else {
        this.$message.error(RetMessage ? RetMessage : '网络错误，请稍后重试!')
      }
    },
    // 用户重置密码
    async userResetPwd() {
      const data = {
        student_id: this.studentId,
        password: this.password,
        passwordAgain: this.passwordAgain,
        security: this.security,
        answer: this.answer,
      }
      const { RetCode, RetMessage, RetObject } = await user_resetPwd(data)
      if (RetCode == 0) {
        this.$message.success('重置密码成功!')
        this.goLogin()
      } else {
        this.$message.error(RetMessage ? RetMessage : '网络错误，请稍后重试!')
      }
    },
    // 校验用户、密码输入
    checkInput() {
      if (this.studentId == '') return this.$message.error('请输入学号!')
      if (this.password == '') return this.$message.error('请输入密码!')
      if (this.password.length > 12 || this.password.length < 6)
        return this.$message.error('密码错误，请输入6-12位密码!')
      if (this.isRegister || this.isReset) {
        if (!this.security) return this.$message.error('请设置密保问题!')
        if (!this.answer) return this.$message.error('请输入密保答案!')
      }
      if (this.isRegister) {
        if (this.grade == '') return this.$message.error('请选择年级!')
        else if (this.classNum == '') return this.$message.error('请选择班级!')
      } else if (this.isReset) {
        if (this.passwordAgain == '') return this.$message.error('请再次输入密码!')
        else if (this.password != this.passwordAgain) return this.$message.error('两次输入的密码不一致!')
      }
      return 1
    },
  },
}
</script>

<style lang="scss" scoped>
.login {
  position: relative;
  width: 100vw;
  height: 100vh;
  background-image: url('@/assets/img/login_bg.jpg');
  cursor: default;
  .login-warper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    height: 300px;
    border-radius: 6px;
    background-size: cover;
    background-position: center;
    backdrop-filter: blur(8px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    .title {
      padding: 20px 0;
      font-size: 18px;
      font-weight: 800;
      text-align: center;
    }
    .input-box {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .input-title {
        width: 400px;
        margin-bottom: 10px;
      }
      .input-item {
        width: 400px;
        margin-bottom: 20px;
        &:hover {
          box-shadow: 0 0 10px rgba($color: #000000, $alpha: 0.3);
        }
      }
      .forgot-pwd {
        margin-bottom: 20px;
        a {
          color: rgba($color: #000000, $alpha: 0.5);
          font-size: 14px;
          &:hover {
            color: rgba($color: #000000, $alpha: 0.7);
          }
        }
      }
      .register-select {
        width: 400px;
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }
    .btn-box {
      display: flex;
      justify-content: center;
      align-items: center;
      .register-btn,
      .login-btn,
      .reset-btn {
        padding: 5px 20px;
        margin: 0 5px;
        font-weight: 600;
        border: 1px solid rgba($color: #000000, $alpha: 0.3);
        border-radius: 5px;
        cursor: pointer;
        &:hover {
          box-shadow: 0 0 10px rgba($color: #000000, $alpha: 0.3);
        }
        &:active {
          box-shadow: 0 0 10px rgba($color: #000000, $alpha: 0.5);
          transform: translateY(2px);
        }
      }
    }
  }
}
.red-tip {
  position: absolute;
  bottom: 2px;
  font-size: 12px;
  color: red;
}
</style>